<!-- CityManagement.vue -->
<template>
  <div class="city-management">
    <!-- 搜索框 -->
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="6">
        <el-input v-model="searchTerm" placeholder="输入城市名称搜索" />
      </el-col>
      <el-col :span="6">
        <el-checkbox v-model="showDeleted">显示已删除城市</el-checkbox>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="processedCities" border>
      <el-table-column prop="name" label="城市名称" width="300" />
      
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button 
            size="small" 
            @click="handleDelete(scope.$index)"
            type="danger"
            :disabled="!canDelete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      showDeleted: false,
      cities: [
        { name: '北京', deleted: false },
        { name: '上海', deleted: false },
        { name: '广州', deleted: false },
        { name: '深圳', deleted: false }
      ]
    };
  },
  computed: {
    filteredCities() {
      return this.cities.filter(city => 
        city.name.includes(this.searchTerm) && 
        (this.showDeleted || !city.deleted)
      );
    },
    canDelete() {
      return this.filteredCities.some(city => !city.deleted);
    }
  },
  methods: {
    handleDelete(index) {
      this.cities[index].deleted = true;
      this.$message.success('城市已标记为删除');
    }
  }
};
</script>

<style scoped>
.city-management {
  padding: 0 20px;
}
</style>